<template>
    <div class="shoppingCar">
        <IHeader class="header" back="true" title="购物车" :manage="!editing" @manage="handleManage" :finish="editing" @finish="handleFinish"></IHeader>
        <scroller class="wrap" @loadmore="loadmore">
            <div class="content" v-for="(item, index) in carList" :key="item.id">
                <div class="store-item">
                    <div class="store-top">
                        <Check class="margin_right_24" show="true" :checked="payList[index].checked || checkAll" @doclick="checkThisStore(index)"></Check>
                        <div class="store-name">
                            <image :src="imgPath('home.png')" class="storeimg"></image>
                            <text class="storename">{{item.shopName}}</text>
                        </div>
                    </div>
                    <div class="good-item" v-for="(item1, indexs) in item.goods" :key="item1.goodsId">
                        <Check class="margin_right_24" show="true" :checked="payList[index].checkList[indexs].checked || payList[index].checked" @doclick="checkThisGoods(index, indexs)"></Check>
                        <div class="good-right">
                            <image :src="item1.goodsUrl" class="goodImg"></image>
                            <div class="right">
                                <text class="goodname">{{item1.goodsName}}</text>
                                <div class="detail-info">
                                    <div class="hebing">
                                        <div class="type">
                                            <text class="text">订购类型：</text>
                                            <text class="text" v-if="item1.buyType == 1">现货</text>
                                            <text class="text"  v-if="item1.buyType == 2">定制</text>
                                        </div>
                                        <div class="type">
                                            <text class="text">商品类型：</text>
                                            <text class="text" v-if="item1.goodsType == 1">样品</text>
                                            <text class="text" v-if="item1.goodsType == 2">大货</text>
                                        </div>
                                    </div>
                                </div>
                                <div class="price">
                                    <div class="hebing">
                                        <div class="nowPrice">
                                            <text class="money">￥</text>
                                            <text class="money">{{item1.discountPrice ? item1.discountPrice : item1.price}}/{{item1.priceUnit ? item1.priceUnit : ''}}</text>
                                        </div>
                                        <!--<div class="nowPrice">-->
                                            <!--<text class="oldmoney">原价 ￥</text>-->
                                            <!--<text class="oldmoney">{{item1.price}}</text>-->
                                        <!--</div>-->
                                    </div>
                                    <div class="btn">
                                        <text class="del " @click="deleteNum(item1, index, indexs)">-</text>
                                        <input type="number" class="numipt"  v-model="item1.amount">
                                        <text class="del add" @click="addNum(item1, index, indexs)">+</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="xian"></div>
            </div>
        </scroller>
        <div class="footer">
            <div class="flex_row align_center" @click="handleCheckAll">
                <Check class="margin_right_24" show="true" :checked="checkAll" @doclick="handleCheckAll"></Check>
                <text class="chooseText">全选</text>
            </div>
            <div class="flex_row align_center" v-if="!editing">
                <text class="heji">合计：￥{{totalMoney}}</text>
                <text class="jiesuan col_fff" @click="pushWriteOrder">结算（￥{{totalMoney}}）</text>
            </div>
            <div class="flex_row align_center" v-if="editing">
                <text class="deleteText" @click="clearOne">清除</text>
            </div>
        </div>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Check from '@/components/check'
import { WxcLoading } from 'weex-ui'
// import { validatenull } from '@/util/validate'
import {shoppingCarList} from '@/api/order'
import {changeNumber, deleteCar} from '@/api/store'
const modal = weex.requireModule('modal')

export default {
  name: 'shoppingCar',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      editing: false, // 编辑中
      checkAll: false, // 全选
      carList: [], // 购物车列表
      payList: [], // 店铺结算列表
      pageNo: 1,
      pageSize: 5,
      cartIds: [], // 购物车id列表
      choose: false,
      cartGoodsIds: []
    }
  },
  watch: {
    payList: {
      handler (newValue, oldValue) {
        const that = this
        let datas = newValue
        let count = 0
        datas.forEach((item) => {
          if (!item.checked) {
            count++
          }
          let childCount = 0
          item.checkList.forEach((child) => {
            if (!child.checked) {
              childCount++
            }
          })
          if (childCount > 0) {
            item.checked = false
            return
          }
          item.checked = true
        })
        if (count > 0) {
          that.checkAll = false
          return
        }
        that.checkAll = true
      },
      deep: true
    }
  },
  mounted () {
    const that = this
    that.getDataList()
  },
  methods: {
    getDataList () { // 获取数据列表
      const that = this
      let param = {
        pageNo: that.pageNo,
        pageSize: that.pageSize
      }
      that.loadingShow = true
      that.$api.get(shoppingCarList, param, function (res) {
        that.loadingShow = false
        let list = res.data.records
        if (list.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.carList = that.carList.concat(list)
        for (let i = 0; i < list.length; i++) {
          let obj = {
            checked: false,
            checkList: []
          }
          for (let j = 0; j < list[i].goods.length; j++) {
            let check = {
              checked: false
            }
            obj.checkList.push(check)
          }
          that.payList.push(obj)
        }
      }, function () {}, true)
    },
    loadmore () { // 加载更多
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getDataList()
    },
    handleManage () { // 管理
      this.editing = true
    },
    handleFinish () { // 完成
      this.editing = false
    },
    handleCheckAll () { // 全选
      const that = this
      that.checkAll = !that.checkAll
      that.payList.forEach((item) => {
        item.checkList.forEach((list) => {
          list.checked = that.checkAll
        })
      })
    },
    checkThisStore (inx) { // 店铺全选
      const that = this
      let check = !that.payList[inx].checked
      that.payList[inx].checkList.forEach((list) => {
        list.checked = check
      })
    },
    checkThisGoods (storeInx, goodsInx) { // 商品选择
      const that = this
      that.payList[storeInx].checkList[goodsInx].checked = !that.payList[storeInx].checkList[goodsInx].checked
    },
    deleteNum (item, storeInx, goodsInx) { // 减少数量
      // type等于2是减少
      const that = this
      let para = {
        cartGoodsId: item.id,
        addSubType: 2
      }
      if (item.amount > 1) {
        that.$api.post(changeNumber, para, function () {
          that.carList[storeInx].goods[goodsInx].amount--
        })
      } else {
        let params = {
          cartIds: [],
          cartGoodsIds: [item.id]
        }
        that.$api.post(deleteCar, params, () => {
          that.carList[storeInx].goods.splice(goodsInx, 1)
          that.payList[storeInx].checkList.splice(goodsInx, 1)
          if (that.carList[storeInx].goods.length <= 0) {
            that.carList.splice(storeInx, 1)
            that.payList.splice(storeInx, 1)
          }
        })
      }
    },
    // 增加数量
    addNum (item, index, indexs) {
      // type 为1的时候是增加
      const that = this
      let para = {
        cartGoodsId: item.id,
        addSubType: 1
      }
      that.$api.post(changeNumber, para, function (res) {
        that.carList[index].goods[indexs].amount++
      })
    },
    // 单个店铺全选
    clearOne () {
      const that = this
      let shopsId = []
      let goodsId = []
      for (let i = 0; i < that.payList.length; i++) {
        let count = 0
        for (let j = 0; j < that.payList[i].checkList.length; j++) {
          if (that.payList[i].checkList[j].checked) {
            count++
            goodsId.push(that.carList[i].goods[j].id)
          }
        }
        if (count === that.payList[i].checkList.length) {
          shopsId.push(that.carList[i].id)
        }
      }
      modal.confirm({
        message: '确定清除？',
        okTitle: '确定',
        cancelTitle: '取消'
      }, function (value) {
        if (value === '确定') {
          let params = {
            cartIds: shopsId,
            cartGoodsIds: goodsId
          }
          that.$api.post(deleteCar, params, function () {
            that.carList = []
            that.payList = []
            that.pageNo = 1
            that.getDataList()
          }, () => {}, true)
        }
      })
    },
    // 购物车结算跳到填写订单
    pushWriteOrder () {
      const that = this
      let list = []
      for (let i = 0; i < that.payList.length; i++) {
        let obj = that.carList[i]
        let goodsList = that.carList[i].goods
        obj.goods = []
        for (let j = 0; j < that.payList[i].checkList.length; j++) {
          if (that.payList[i].checkList[j].checked) {
            obj.goods.push(goodsList[j])
          }
        }
        if (obj.goods.length > 0) {
          list.push(obj)
        }
      }
      that.loadingShow = true
      that.$router.push({path: '/mine/writeOrder', query: {paramsList: list}})
    }
  },
  computed: {
    totalMoney () {
      const that = this
      let money = 0
      for (let i = 0; i < that.payList.length; i++) {
        for (let j = 0; j < that.payList[i].checkList.length; j++) {
          if (that.payList[i].checkList[j].checked) {
            let price = that.carList[i].goods[j].discountPrice ? that.carList[i].goods[j].discountPrice : that.carList[i].goods[j].price
            money += Number(price) * Number(that.carList[i].goods[j].amount)
          }
        }
      }
      return money
    }
  },
  components: {
    IHeader,
    Check,
    WxcLoading
  }
}
</script>

<style scoped>
    .margin_right_24 {
        margin-right: 24px;
    }
    .flex_row {
        flex-direction: row;
    }
    .align_center {
        align-items: center;
    }
    .col_fff {
        color: #fff;
    }
    .wrap{
        margin-top: 88px;
        margin-bottom: 98px;
    }
    .store-item{
        flex-direction: column;
        padding-top: 30px;
        padding-left: 25px;
        padding-right: 25px;
    }
    .storeimg{
        width: 35px;
        height: 32px;
    }
    .store-top{
        flex-direction: row;
        margin-right:16px;
    }
    .store-name{
        flex-direction: row;
        margin-left:50px;
    }
    .storename{
        font-size:30px;
        color:rgb(134,134,134);
        font-family: medium;
        margin-left:16px;
    }
    .good-item{
        flex-direction: row;
        margin-top:15px;
        align-items: center
    }
    .good-right{
        margin-left:50px;
        background-color: rgb(245,245,245);
        border-radius: 10px;
        flex:1;
        padding:15px;
        flex-direction: row;
        padding-bottom: 10px;
    }
    .right{
        flex:1;
    }
    .goodname {
        font-size: 28px;
        font-weight: bold;
        color: rgb(70, 70, 70);
        lines: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .type {
        flex-direction: row;
        margin-right: 27px;
        align-items: center;
    }
    .text {
        font-size: 24px;
        color: rgb(134, 134, 134);
    }
    .num {
        position: absolute;
        right: 0;
    }
    .price {
        flex-direction: row;
        margin-top: 20px;
        justify-content: space-between;
    }
    .nowPrice {
        flex-direction: row;
        margin-right: 24px;
        align-items: center;
    }
    .money {
        font-size: 28px;
        font-weight: bold;
        color: rgb(70, 70, 70);

    }
    .oldmoney {
        font-size: 24px;
        color: rgb(134, 134, 134);
        text-decoration: line-through;
    }

    .detail-info {
        flex-direction: row;
        margin-top: 8px;
        justify-content: space-between;
    }
    .hebing{
        flex-direction: row;
    }
    .btn{
        flex-direction: row;
        height:40px;
        border-width:1px;
        border-style:solid;
        background-color: red;
        border-color:rgb(206,206,206);
        border-radius: 8px;
    }
    .del{
        font-size: 24px;
        color:rgb(70,70,70);
        line-height:40px;
        width:40px;
        height: 40px;
        text-align:center;
        border-right-width: 1px;
        border-right-color: rgb(206,206,206);
        border-right-style: solid;
        background-color: #fff;
    }
    .add {
        border-right:none;
        border-left-style: solid;
        border-left-width: 1px;
        border-left-color: rgb(206,206,206);
    }
    .numipt{
        font-size: 24px;
        color: rgb(70,70,70);
        font-family: regular;
        padding-left:10px;
        padding-right:10px;
        height: 40px;
        line-height:35px;
        width: 60px;
        background-color: #Fff;
        border-right-color:rgb(206,206,206)
    }
    .goodImg{
        width: 128px;
        height: 128px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        margin-right: 15px;
    }
    .xian{
       width: 750px;
        height:16px;
        background-color:rgb(245,245,245);
        margin-top:30px;
    }
    .footer {
        width:750px;
        height:98px;
        padding-left:24px;
        padding-right:24px;
        border-top-width:1px;
        border-top-style: solid;
        border-top-color:rgba(0,32,64,0.12);
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: white;
    }
    .chooseText{
        font-size:28px;
        color:rgb(70,70,70);
        font-family: medium;
        /*margin-left:25px;*/
    }
    .heji {
        font-size:26px;
        color:rgb(254,203,1);
        font-weight:bold;
    }
    .jiesuan {
        height: 60px;
        margin-left: 24px;
        padding-left: 20px;
        padding-right: 20px;
        line-height: 60px;
        font-size: 26px;
        border-radius: 10px;
        background-color: #2b3040;
    }
    .clearText{
        width: 175px;
        height: 60px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(206,206,206);
        border-radius: 10px;
        background-color: #fff;
        color: rgb(70,70,70);
        font-size: 26px;
        line-height: 60px;
        text-align: center;
    }
    .deleteText{
        width:175px;
        height:60px;
        border-width:1px;
        border-style:solid;
        border-radius: 10px;
        background-color: rgb(43,48,64);
        margin-left: 32px;
        color:#Fff;
        font-size: 26px;
        line-height: 60px;
        text-align: center;
    }
</style>
